<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <el-form labelWidth="150px">
        <el-form-item label="所属部门" class="is-required">
          <selectorg @getselectorgid="getselectorgid" :itemorgid="branchidlist.hash.branch"></selectorg>
          <div class="el-form-item__error" v-if="!$v.branchidlist.hash.branch.required">
            请选择所属部门
          </div>
        </el-form-item>

        <el-form-item label="车辆编号" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="branchidlist.hash.carid" :disabled="disable"></el-input>
          <div class="el-form-item__error" v-if="!$v.branchidlist.hash.carid.required">
            请输入车辆编号
          </div>
          <!-- <div class="el-form-item__error" v-if="!$v.branchidlist.hash.carid.alphaNum">
            车辆编号格式有误
          </div> -->
        </el-form-item>
        <el-form-item label="牌照" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="branchidlist.hash.carno" :disabled="disable"></el-input>
          <div class="el-form-item__error" v-if="!$v.branchidlist.hash.carno.required">
            请输入牌照
          </div>
          <!-- <div class="el-form-item__error" v-if="!$v.branchidlist.hash.carno.alphaNum">
            牌照格式有误
          </div> -->
        </el-form-item>
        <el-form-item label="车型&排量" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="branchidlist.hash.cartype" :disabled="disable"></el-input>
          <div class="el-form-item__error" v-if="!$v.branchidlist.hash.cartype.required">
            请输入车型&排量
          </div>
        </el-form-item>
        <el-form-item label="购置日期" class="is-required">
          <el-date-picker
            v-model="branchidlist.hash.paytime"
            type="date"
            style="width:100%"
            placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
          <div class="el-form-item__error" v-if="!$v.branchidlist.hash.paytime.required">
            请选择购置日期
          </div>
        </el-form-item>
        <el-form-item label="负责人" class="is-required">
          <searchperson @getpersonid="getpersonid" :itempersonid="branchidlist.hash.holderid"></searchperson>
          <div class="el-form-item__error" v-if="!$v.branchidlist.hash.holder.required">
            请选择负责人
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addcar">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchperson from '~/components/common/searchperson.vue';
import selectorg from '~/components/common/selectorg.vue';
import { required } from 'vuelidate/lib/validators';

export default {
  validations: {
    branchidlist: {
      hash: {
        branch: {
          required,
        },
        carid: {
          required,
        },
        carno: {
          required,
        },
        cartype: {
          required,
        },
        paytime: {
          required,
        },
        holder: {
          required,
        },
      },
    },
  },
  props: {
    itemvalname: Object,
    chousebtn: Number,
  },
  components: {
    selectorg,
    searchperson,
  },
  data() {
    return {
      disable: false,
      title: '添加车辆基本信息',
      dialogVisible: true,
      radio1: '',
      checkList: ['选中且禁用', '复选框 A'],
      ts: this.newStore(),
      changeval: 0,
      // 获取部门列表
      branchidlist: {
        cols: [],
        hash: {
          branch: '', // 所属部门id
          carid: '', // 车辆编号
          carno: '', // 牌照
          cartype: '', // 车型排量
          paytime: '', // 购买日期
          holder: '', // 负责人id
          holders: '', // 负责人value
        },
      },
      carlist: [],
    };
  },
  mounted() {
    this.getcarval();
    if (this.chousebtn == 2) {
      this.title = '修改车辆基本信息';
      this.disable = true;
    }
  },
  methods: {
    // 渲染信息
    getcarval() {
      // console.log(this.itemvalname, "222");
      if (this.itemvalname == '' || this.itemvalname == undefined) {
      } else if (this.chousebtn == 2) {
        this.branchidlist = {};
        // console.log(this.itemvalname, "1");
        // console.log(this.branchidlist, "2");
        this.branchidlist = this.itemvalname;

        // console.log(this.branchidlist, "3");
      }
    },
    // 获取部门
    getselectorgid(val) {
      // console.log(val, "0909");
      this.branchidlist.hash.branch = val;
    },
    // 获取负责人
    getpersonid(val) {
      this.changeval = 1;
      this.branchidlist.hash.holder = val.id;
      this.branchidlist.hash.holders = val.value;
    },
    // 添加/编辑车辆信息
    addcar() {
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else if (this.chousebtn == 1) {
        this.$confirm('是否添加该车辆信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle: '0E56125B90D2898A9F595BEEBE51B7F2DD0C86AA5791D970',
              carid: this.branchidlist.hash.carid,
              carno: this.branchidlist.hash.carno,
              paytime: this.branchidlist.hash.paytime,
              cartype: this.branchidlist.hash.cartype,
              holderid: this.branchidlist.hash.holder,
              branchid: this.branchidlist.hash.branch,
            };
            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              if (ts.d.sflag == 'success') {
                this.$message({
                  type: 'success',
                  message: '添加成功!',
                });
                this.dialogVisible = false;
                this.$emit('update:addcar', this.branchidlist);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      } else if (this.chousebtn == 2) {
        // console.log(this.paytime);
        // console.log(this.changeval, "889");
        // console.log(this.branchidlist.hash.holders, "8890");

        if (this.changeval == 0) {
          this.branchidlist.hash.holder = this.branchidlist.hash.holderid;
        }
        this.$confirm('是否修改该车辆信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle: '0E56125B90D2898AED0E75812E6B73E954347431A207BA75',
              carid: this.branchidlist.hash.carid,
              carno: this.branchidlist.hash.carno,
              paytime: this.branchidlist.hash.paytime,
              cartype: this.branchidlist.hash.cartype,
              holderid: this.branchidlist.hash.holder,
              branchid: this.branchidlist.hash.branch,
            };
            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              if (ts.d.sflag == 'success') {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                });
                this.dialogVisible = false;
                this.$emit('update:addcar', this.branchidlist);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
.statusspan {
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>
